<!-- pages/login/login.vue -->
<template>
  <view class="page-container">
    <view class="login-card">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="title">智慧系统</text>
      </view>
      
      <view class="form-group">
        <view class="form-item">
          <view class="input-wrapper">
            <text class="icon">📱</text>
            <input
              v-model="form.mobile"
              placeholder="请输入手机号码"
              @input="validateField('mobile')"
              class="input"
              type="number"/>
          </view>
          <text class="error-msg" v-if="errors.mobile">{{ errors.mobile }}</text>
        </view>
        
        <view class="form-item">
          <view class="input-wrapper">
            <text class="icon">🔒</text>
            <input
              v-model="form.password"
              password
              placeholder="请输入密码"
              @input="validateField('password')"
              class="input"/>
          </view>
          <text class="error-msg" v-if="errors.password">{{ errors.password }}</text>
        </view>
      </view>
      
      <button
        @click="handleLogin"
        :disabled="isSubmitting"
        :loading="isSubmitting"
        class="login-btn"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      form: {
        mobile: '',
        password: ''
      },
      redirect: '',
      errors: {
        mobile: '',
        password: ''
      },
      isSubmitting: false,
      validationRules: {
        mobile: [
          { required: true, message: '手机号码不能为空' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' }
        ],
        password: [
          { required: true, message: '密码不能为空' },
          { minLength: 6, message: '密码长度不能少于6个字符' },
          { maxLength: 20, message: '密码长度不能超过20个字符' }
        ]
      }
    }
  },
  onLoad(options) {
    this.redirect = options.redirect || ''
  },
  methods: {
    ...mapActions('user', ['login']),
    
    // 验证单个字段
    validateField(field) {
      this.errors[field] = ''
      const rules = this.validationRules[field]
      const value = this.form[field]
      
      for (const rule of rules) {
        if (rule.required && !value) {
          this.errors[field] = rule.message
          return
        }
        if (rule.minLength && value.length < rule.minLength) {
          this.errors[field] = rule.message
          return
        }
        if (rule.maxLength && value.length > rule.maxLength) {
          this.errors[field] = rule.message
          return
        }
        if (rule.pattern && !rule.pattern.test(value)) {
          this.errors[field] = rule.message
          return
        }
      }
    },
    
    // 验证所有字段
    validateForm() {
      let isValid = true
      Object.keys(this.validationRules).forEach(field => {
        this.validateField(field)
        if (this.errors[field]) {
          isValid = false
        }
      })
      return isValid
    },
    
    async handleLogin() {
      // 验证表单
      if (!this.validateForm()) {
        return
      }
      
      this.isSubmitting = true
      try {
        // 注意：这里需要将mobile传给login action
        await this.login({ mobile: this.form.mobile, password: this.form.password })
        uni.switchTab({
          url: '/pages/my/my'
        })
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
  padding: 40rpx;
}

.login-card {
  width: 100%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 50rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5rpx);
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
  border-radius: 50%;
  border: 4rpx solid #e6f7ff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.form-group {
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 90rpx;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-wrapper:focus-within {
  border-color: #007aff;
  box-shadow: 0 0 0 5rpx rgba(0, 122, 255, 0.1);
}

.icon {
  margin-right: 20rpx;
  font-size: 32rpx;
  color: #007aff;
}

.input {
  flex: 1;
  height: 90rpx;
  font-size: 30rpx;
}

.error-msg {
  color: #e64340;
  font-size: 24rpx;
  margin-top: 10rpx;
  display: block;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: white;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 30rpx;
  transition: background-color 0.3s, opacity 0.3s;
}

.login-btn:hover {
  background-color: #0066cc;
}

.login-btn:active {
  opacity: 0.8;
}

.login-btn[disabled] {
  background-color: #a0cfff;
  color: #f2f7ff;
}
</style>